<div class="container h-100 d-flex justify-content-center align-items-center flex-column">
  <h2>Search Mistral by a <code>task</code>, an <code>action</code> or a <code>workflow execution</code> ID:</h2>

  <div class="input-group input-group-lg">
    <input type="search" class="form-control text-center"
           required
           minlength="36"
           maxlength="36"
           id="input"
           name="input"
           (keyup.enter)="search()"
           [pattern]="uuidPattern"
           [(ngModel)]="searchInput"/>
    <div class="input-group-append pointer">
      <span class="input-group-text pointer" (click)="search()" title="or hit Enter"><i class="fa fa-search"></i></span>
    </div>
  </div>

  <div class="alert alert-warning mt-2" *ngIf="err === 'NOT_FOUND'">
    <i class="fa fa-info-circle"></i> The given ID doesn't match a task, an action or a workflow execution.
  </div>

  <i class="fa fa-spin fa-spinner mt-3 fa-2x" *ngIf="searching"></i>
</div>